<template>
  <view>
    <image class="bg" src="../../static/my/ysrz.png" mode="aspectFill" />
    <view class="back" @click="goBack">
      <u-icon name="arrow-left" size="24" color="#fff"></u-icon>
    </view>
    <view class="pageBox">
      <view class="box">
        <view class="title">请核对您的信息</view>
        <u-form labelPosition="left" :model="formData" ref="uForm" label-width="90">
          <u-form-item label="姓名" prop="userInfo.name" ref="item1" borderBottom>
            <u-input v-model="formData.yishiName" border="none" placeholder="请输入姓名"></u-input>
          </u-form-item>
          <u-form-item label="手机号" prop="userInfo.phone" ref="item1" borderBottom>
            <u-input v-model="formData.phone" border="none" placeholder="请输入手机号"></u-input>
          </u-form-item>
          <u-form-item label="身份证号" prop="address">
            <u-input v-model="formData.idCard" border="none" placeholder="请输入身份证号"></u-input>
          </u-form-item>
          <u-form-item label="简介" prop="address">
            <u-input v-model="formData.hosDesc" border="none" placeholder="请输入简介"></u-input>
          </u-form-item>
          <u-form-item label="咨询方向" prop="address">
            <u-input v-model="formData.inquiryDirection" border="none" placeholder="咨询方向,多个使用逗号分割"></u-input>
          </u-form-item>
          <u-form-item label="医生年限" prop="address">
            <u-input v-model="formData.yearLimit" border="none" placeholder="请输入医生年限"></u-input>
          </u-form-item>
        </u-form>
      </view>
      <view class="box">
        <view class="title">请填写您的信息</view>
        <u-form labelPosition="top" :model="formData" ref="uForm" label-width="90">
          <u-form-item label="请选择所属分类" labelWidth="150" class="selectedItem" borderBottom @click="show = true" ref="item1">
            <u-input v-model="formData.cateName" border="none" placeholder="请选择"></u-input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-picker :show="show" keyName="title" :columns="coteList" @cancel="show = false" @confirm="selectClick"></u-picker>
          <u-picker :show="show1" keyName="title" :columns="hisList" @cancel="show1 = false" @confirm="selectClick1"></u-picker>
          <u-form-item label="请选择所在医院" labelWidth="150" class="selectedItem" borderBottom @click="show1 = true" ref="item1">
            <u-input v-model="formData.shopName" border="none" placeholder="请选择"></u-input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item labelWidth="150" label="请上传资质证件" prop="address">
            <view class="imgBox">
              <view class="empty" v-for="(item, index) in picList" :key="index">
                <image
                  @click="
                    TanPreviewImage(
                      picList.map((i: any) => i.url),
                      index
                    )
                  "
                  :src="item.url"
                  mode="aspectFill"
                />
                <view class="closeBox" @click="closeFn(index)">
                  <u-icon name="close"></u-icon>
                </view>
              </view>

              <view class="imgBox1" @click="chooseMediaFn">
                <u-icon name="photo" size="28" color="#aaaaaa"></u-icon>
                <view>图片</view>
              </view>
            </view>
          </u-form-item>

          <u-form-item labelWidth="150" label="请输入联系方式" prop="address">
            <view class="scBox">
              <image v-if="formData.imgUrl" class="box" :src="formData.imgUrl" mode=""></image>
              <view v-else class="box" @click="uploadImg">
                <u-icon name="plus" color="#C9CDD8" size="30"></u-icon>
              </view>
            </view>
          </u-form-item>
        </u-form>
      </view>
    </view>
    <view class="bottomBox">
      <u-button text="立即入驻" color="#81D8D0"></u-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ysSelectCote } from "@/api/home";
import { goBack, TanPreviewImage } from "@/utils/commonFn";
import { onMounted, ref } from "vue";
const formData = ref({
  yishiName: "",
  phone: "1",
  idCard: "",
  address1: "",
  shopId: "",
  shopName: "",
  aptitudeCertificateUrl: "",
  wechatQrcode: "",
  hosDesc: "",
  imgUrl: "",
  inquiryDirection: "",
  yearLimit: "",
  cateId: "",
  cateName: "",
  userId: uni.getStorageSync("userId"),
});
const show = ref(false);
const show1 = ref(false);
const coteList = ref();
const hisList = ref();
const picList = ref([]);

onMounted(async () => {
  const res = await ysSelectCote();
  coteList.value = [res.data];
});
const closeFn = (index: number) => {
  picList.value.splice(index, 1);
};
const selectClick = async (info: any) => {
  formData.value.cateId = info.value[0].id;
  formData.value.cateName = info.value[0].title;
  show.value = false;
};
const selectClick1 = async (info: any) => {
  formData.value.shopId = info.value[0].id;
  formData.value.shopName = info.value[0].title;
  show1.value = false;
};
</script>

<style lang="less" scoped>
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 468rpx;
  z-index: 1;
  z-index: 11;
}

.pageBox {
  width: 100%;
  position: absolute;
  top: 400rpx;
  padding-bottom: 150rpx;
  z-index: 11;
  .box {
    margin: 20rpx;
    padding: 32rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    /deep/ .uni-input-wrapper {
      text-align: right;
    }
    .title {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      line-height: 46rpx;
      text-align: left;
    }
    .selectedItem {
      /deep/.u-form-item__body__right {
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #f3f4f6;
        padding: 20rpx;
      }
    }
    /deep/ .uni-input-wrapper {
      text-align: left;
    }
  }
}
.scBox {
  display: flex;
  .box {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    background: #f3f5f7;
    margin-right: 5rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.bottomBox {
  z-index: 10;
}
.imgBox {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20rpx;
  .empty {
    height: 212rpx;
    border-radius: 8rpx;
    position: relative;
    image,
    video {
      width: 100%;
      height: 100%;
    }
  }
  .closeBox {
    position: absolute;
    right: 5rpx;
    top: 5rpx;
  }
  .imgBox1 {
    width: 31%;
    height: 212rpx;
    border-radius: 8rpx;
    background: #eeeeee;
    font-size: 28rpx;
    color: #aaaaaa;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
</style>
